<template>
  <div class="thirdView" :style="transScale">
    <!-- 头部 -->
    <div class="header">
      <div class="title">
        <span>{{radarMapData.consignName?radarMapData.consignName:queryInfo.company}}</span>
        <span class="second">- {{ queryInfo.text }}</span>
      </div>
      <!-- <search-view class="searchView"></search-view> -->
      <img class="chilun1" src="../../assets/images/bigViewIMG/chilun1.png" alt="">
      <img class="chilun2" src="../../assets/images/bigViewIMG/chilun2.png" alt="">
      <div class="dateTime">
        <div class="date">{{ date }}</div>
        <div class="time">{{time}}</div>
        <div class="week">{{weekDate}}</div>
      </div>
    </div>
 
    <!-- 面包屑导航 -->
    <div class="breadNav">
      <div class="left">
        <img src="@/assets/images/bigViewIMG2/weizhi.png" alt="">
        <div class="add">当前位置：</div>
      </div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/visual/bigscreen/viewer?reportCode=EArchives_first' }">企业E档案</el-breadcrumb-item>
        
         <el-breadcrumb-item :to="{ path: topath }">档案全景</el-breadcrumb-item>
        <el-breadcrumb-item>执法档案</el-breadcrumb-item>

      </el-breadcrumb>
    </div>
    <!-- 内容部分 -->
    <div class="main">
     
      <!-- 干预档案 -->
        <div class="main_searchForm" >
            <div class="zhifaDA_title">
              <img src="@/assets/images/bigViewIMG3/search.png" alt="">
              <!-- <span class="zhifaDA_title_text" :class="searchActived==0?'searchActived':''" @click="searchActived=0">查询干预档案</span> -->
              <span class="zhifaDA_title_text2">查询条件</span>
            </div>
         
            <div class="searchForm" >
              <el-form ref="form" :model="zhiFaForm" inline size="medium">
                <el-form-item>
                  <el-input v-model="zhiFaForm.consignCode" placeholder="输入企业编码"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="zhiFaForm.consignName" placeholder="输入企业名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="zhiFaForm.codeName" placeholder="输入商品名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="zhiFaForm.codeTs" placeholder="输入商品编号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-date-picker v-model="zhiFaDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="zhiFaSearch">查询</el-button>
                  <el-button plain icon="el-icon-refresh" @click="zhiFaClear">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
        </div>
    
      <div class="ganyuDA" >
        
        <div class="bottom">
         
          <div class="bottom-title">
            <Title name="干预档案"></Title>
          </div>
         
          <!-- 雷达图 -->
          <div class="radar">
            <div id="radarMap" ref="radarMap" style="width: 600px; height: 400px "></div>
          </div>
          <!-- 点击审单和查验 -->
          <!-- <div class="dialogShendan" v-if="showDialogShendan">
            人工审单数：{{ radarMapData.documentReviewCount }}
          </div> -->
         
          <!-- <div class="dialogChayan" v-if="showDialogChayan">
            布控查验数：{{ radarMapData.checkDimensionCount }}
          </div> -->

          <!-- <div class="dialogXSAJ" v-if="showDialogXSAJ">
            <template v-if="dialogXSAJTitle == '核查编号' || dialogXSAJTitle=='稽查编号'">
              <div class="title">{{dialogXSAJTitle}}<i class="iconfont iconleft-copy" style="margin-left:4px"></i></div>
              <div class="code" v-for="(item,index) in secondList" :key="index" @click="clickDialogXSAJSecond2(item)">{{item.jobNo}}
              </div>
            </template>
          <template v-else>
              <div class="title">{{ dialogXSAJTitle }}<i class="iconfont iconleft-copy" style="margin-left:4px"></i></div>
              <div class="code" v-for="(item, index) in secondList" :key="index" @click="clickDialogXSAJSecond(item)">{{ item.ajbh }}
              </div>
            </template>
          </div> -->
        
          <!-- 点击刑事案件  行政案件 核查 稽查-->
        </div>
      </div>
      <div class="zhifaDA">
          <div class="bottom-title">
            <Title name="执法档案"></Title>
          </div>
         
          <!-- 按钮竖直排列 -->
          <!-- 通关 -->
          <div class="info">
           
            <div class="info-title">
              <img src="@/assets/images/bigViewIMG3/tg.png" alt="">
              <span class="" style="font-size:20px">通关</span>
            </div>
            <div class="info-right">
              <el-table :data="tableDataTG" v-loading="tableDataTGLoading"  style="width: 100%" :cell-style="{ color: '#fff',height:'60px',fontSize:'17px' }"
                  :header-cell-style="{ color: '#00ffff',height:'50px',fontSize:'16px' }" >
                <el-table-column type="index" label="排名" width="400">
                </el-table-column>
                <el-table-column prop="key" label="报关单编号" >
                </el-table-column>
                <el-table-column label="操作" width="400">
                 <template slot-scope="scoped">
                  <el-popover  v-if="scoped.row.value.CODE_TS"  placement="bottom-start" width="500" trigger="click"  popper-class="popperOptions">
                    <el-table :data="scoped.row.value.CODE_TS" :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#00ffff' }">
                      <el-table-column property="gno" label="项号" width="50"></el-table-column>
                      <el-table-column  property="gname" label="商品名称"></el-table-column>
                      <el-table-column  property="codeTsFront" label="更改前HS"></el-table-column>
                      <el-table-column property="codeTsAfter" label="更改后HS"></el-table-column>
                    </el-table>
                    <el-button size="medium" type="primary" style="margin-right:10px"  slot="reference" plain>归类更改</el-button>
                  </el-popover>
                  <el-popover  v-if="scoped.row.value.DECL_TOTAL"  placement="bottom-start" width="750" trigger="click"  popper-class="popperOptions">
                    <el-table :data="scoped.row.value.DECL_TOTAL" :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#00ffff' }">
                      <el-table-column property="gno" label="项号"  width="50"></el-table-column>
                      <el-table-column  property="gname" label="商品名称"></el-table-column>
                      <el-table-column label="商品编号" property="codeTs" ></el-table-column>
                      <el-table-column  property="declPriceFront" label="商品更改前单价(或总价)"></el-table-column>
                      <el-table-column  property="declPriceAfter" label="商品更改后单价(或总价)"></el-table-column>
                    </el-table>
                    <el-button type="success" style="margin-right:10px"  plain size="medium" slot="reference">价格更改</el-button>
                  </el-popover>
                  <el-popover v-if="scoped.row.value.ORIGIN_COUNTRY" placement="bottom-start" width="700" trigger="click"  popper-class="popperOptions">
                    <el-table :data="scoped.row.value.ORIGIN_COUNTRY" :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#00ffff' }">
                      <el-table-column property="gno" label="项号"  width="50"></el-table-column>
                      <el-table-column property="gname" label="商品名称"></el-table-column>
                      <el-table-column label="商品编号" property="codeTs"></el-table-column>
                      <el-table-column  property="originCountryFront" label="商品更改前产销国"></el-table-column>
                      <el-table-column property="originCountryAfter" label="商品更改后产销国"></el-table-column>
                    </el-table>
                    <el-button type="danger" plain size="medium" slot="reference" style="margin-right:10px" >原产地更改</el-button>
                  </el-popover>
                  <el-popover v-if="scoped.row.value.QTY_1" placement="bottom-start" width="700" trigger="click"  popper-class="popperOptions">
                    <el-table :data="scoped.row.value.QTY_1" :cell-style="{ color: '#fff' }" :header-cell-style="{ color: '#00ffff' }">
                          <el-table-column property="gno" label="项号"  width="50"></el-table-column>
                          <el-table-column property="gname" label="商品名称"></el-table-column>
                          <el-table-column label="商品编号" property="codeTs"></el-table-column>
                          <el-table-column  property="quantityFront" label="商品更改前数量"></el-table-column>
                          <el-table-column property="quantityAfter" label="商品更改后数量"></el-table-column>
                    </el-table>
                     <el-button type="warning" plain size="medium" slot="reference" style="margin-right:10px" >数量更改</el-button>
                  </el-popover>
                 </template>
                 
                
                </el-table-column>
              </el-table>
              <div class="pagin">
                    <el-pagination background  @size-change="changeTGSize" @current-change="changeTGPage" :current-page="tableDataTGObj.page"
                      :page-size="tableDataTGObj.size" layout="total, prev, pager, next" :total="tableDataTGObj.total">
                    </el-pagination>
              </div>
            </div>
          </div>
          <!-- 稽核查 -->
          <div class="info">
            <div class="info-title">
              <img src="@/assets/images/bigViewIMG3/jhc.png" alt="">
              <span class="jc" :class="changeSelected == 'jc' ?'changeSelected':''" @click="changeSelected='jc'">稽查</span>
              <span class="hc" :class="changeSelected == 'hc' ?'changeSelected':''" @click="changeSelected='hc'">核查</span>
            </div>
            <!-- 稽查 死数据 -->
            <div class="info-right" v-if="changeSelected=='jc'">
              <el-table :data="tableDataJHC" v-loading="tableDataJHCLoading" style="width: 100%" :cell-style="{ color: '#fff',height:'60px',fontSize:'17px' }"
                :header-cell-style="{ color: '#00ffff',height:'50px',fontSize:'16px' }" >
                <el-table-column type="index" label="排名" width="400">
                </el-table-column>
                <el-table-column prop="jobId" label="稽查编号">
                </el-table-column>
                <el-table-column prop="handleconclusion" label="稽查决定书内容">
                   <template slot-scope="scope">
                    <div style="cursor:pointer" @click="tableInfoDialog(scope.row.handleconclusion,'稽查决定书内容')">
                      {{scope.row.handleconclusion?scope.row.handleconclusion.substring(0,20)+'...':''}}
                    </div>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="300">
                    <template>
                      <el-popover placement="bottom-start" width="400" trigger="click" popper-class="popperOptions">
                        <el-table :data="gridData" :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#00ffff' }">
                          <el-table-column property="date" label="商品名称"></el-table-column>
                          <el-table-column property="name" label="更改前HS"></el-table-column>
                          <el-table-column  property="address" label="更改后HS"></el-table-column>
                        </el-table>
                        <el-button size="mini" type="primary" slot="reference" plain>税号更改</el-button>
                      </el-popover>
                      <el-popover placement="bottom-start" width="500" trigger="click" popper-class="popperOptions">
                        <el-table :data="gridData" :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#00ffff' }">
                          <el-table-column property="date" label="商品名称"></el-table-column>
                          <el-table-column property="name" label="HS"></el-table-column>
                          <el-table-column property="address" label="商品更改前单价"></el-table-column>
                          <el-table-column property="address" label="商品更改后单价"></el-table-column>
                        </el-table>
                        <el-button type="success" plain size="mini" slot="reference">价格更改</el-button>
                      </el-popover>
                      <el-popover placement="bottom-start" width="550" trigger="click" popper-class="popperOptions">
                        <el-table :data="gridData" :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#00ffff' }">
                          <el-table-column property="date" label="商品名称"></el-table-column>
                          <el-table-column property="name" label="HS"></el-table-column>
                          <el-table-column property="name" label="商品更改前产销国"></el-table-column>
                          <el-table-column property="address" label="商品更改后产销国"></el-table-column>
                        </el-table>
                        <el-button type="danger" plain size="mini" slot="reference">原产地更改</el-button>
                      </el-popover>
                    </template>
                </el-table-column> -->
              </el-table>
                <div class="pagin">
                  <el-pagination background  @size-change="changeJCSize" @current-change="changeJCPage"
                    :current-page.sync="tableDataJHCObj.page" :page-size="tableDataJHCObj.size" layout="total, prev, pager, next" :total="tableDataJHCObj.total">
                  </el-pagination>
                </div>
            </div>
            <div class="info-right" v-if="changeSelected=='hc'">
              <el-table :data="tableDataHC" v-loading="tableDataHCLoading"   style="width: 100%" :cell-style="{ color: '#fff',height:'60px',fontSize:'17px' }"
                :header-cell-style="{ color: '#00ffff',height:'50px',fontSize:'16px' }" >
                <el-table-column type="index" label="排名" width="400">
                </el-table-column>
               
                <el-table-column prop="jobNo" label="核查编号" >
                </el-table-column>
                <el-table-column prop="hcRst" label="核查结果" >
                  <template slot-scope="scope">
                    <div style="cursor:pointer" @click="tableInfoDialog(scope.row.hcRst,'核查结果')">
                      {{scope.row.hcRst?scope.row.hcRst.substring(0,20)+'...':''}}
                    </div>
                  </template>
                  
                </el-table-column>
                <!-- <el-table-column label="操作" width="300">
                  <template slot-scope="scoped">
                    <el-popover v-if="scoped.row.value.CODE_TS" placement="bottom-start" width="700" trigger="click" popper-class="popperOptions">
                      <el-table :data="scoped.row.value.CODE_TS" :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#00ffff' }" >
                        <el-table-column property="entryId" label="报关单编号"></el-table-column>
                        <el-table-column property="gno" label="项号" width="50"></el-table-column>
                        <el-table-column property="gname" label="商品名称"></el-table-column>
                        <el-table-column property="codeTsAfter" label="更改前HS"></el-table-column>
                        <el-table-column property="codeTsFront" label="更改后HS"></el-table-column>
                      </el-table>
                      <el-button style="margin-right:10px"  size="mini" type="primary" slot="reference" plain>税号更改</el-button>
                    </el-popover>
                    <el-popover v-if="scoped.row.value.DECL_TOTAL" placement="bottom-start" width="900" trigger="click" popper-class="popperOptions">
                      <el-table :data="scoped.row.value.DECL_TOTAL" :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#00ffff' }">
                        <el-table-column property="entryId" label="报关单编号"></el-table-column>
                        <el-table-column property="gno" label="项号" width="50"></el-table-column>
                        <el-table-column property="gname" label="商品名称"></el-table-column>
                        <el-table-column label="商品编号" property="codeTs"></el-table-column>
                        <el-table-column property="declPriceAfter" label="商品更改前单价(或总价)"></el-table-column>
                        <el-table-column property="declPriceFront" label="商品更改后单价(或总价)"></el-table-column>
                      </el-table>
                      <el-button style="margin-right:10px"  type="success" plain size="mini" slot="reference">价格更改</el-button>
                    </el-popover>
                    <el-popover v-if="scoped.row.value.ORIGIN_COUNTRY" placement="bottom-start" width="900" trigger="click" popper-class="popperOptions">
                      <el-table :data="scoped.row.value.ORIGIN_COUNTRY" :cell-style="{ color: '#fff' }"
                  :header-cell-style="{ color: '#00ffff' }">
                        <el-table-column property="entryId" label="报关单编号"></el-table-column>
                        <el-table-column property="gno" label="项号" width="50"></el-table-column>
                        <el-table-column property="gname" label="商品名称"></el-table-column>
                        <el-table-column label="商品编号" property="codeTs"></el-table-column>
                        <el-table-column property="originCountryAfter" label="商品更改前产销国"></el-table-column>
                        <el-table-column property="originCountryFront" label="商品更改后产销国"></el-table-column>
                      </el-table>
                      <el-button style="margin-right:10px"  type="danger" plain size="mini" slot="reference">原产地更改</el-button>
                    </el-popover>
                  </template>
                </el-table-column> -->
              </el-table>
              <div class="pagin">
                <el-pagination background  @size-change="changeHCSize" @current-change="changeHCPage"
                  :current-page.sync="tableDataHCObj.page" :page-size="tableDataHCObj.size" layout="total, prev, pager, next" :total="tableDataHCObj.total">
                </el-pagination>
              </div>
            </div>
          </div>
          <!-- 缉私 -->
          <div class="info">
           
            <div class="info-title">
              <img src="@/assets/images/bigViewIMG3/js.png" alt="">
              <span class="" style="font-size:20px">缉私</span>
            </div>
            <div class="info-right">
              <el-table :data="tableDataJS" v-loading="tableDataJSLoading" style="width: 100%" :cell-style="{ color: '#fff',height:'60px',fontSize:'17px' }"
                :header-cell-style="{ color: '#00ffff',height:'50px',fontSize:'16px' }" >
                <el-table-column type="index" label="排名" width="100">
                </el-table-column>
                <el-table-column prop="ajbh" label="缉私案件编号" width="350">
                </el-table-column>
                <el-table-column prop="ajflName" label="缉私案件分类" width="300">
                </el-table-column>
                <el-table-column prop="jyaq" label="缉私案件决定书内容" >
                  <template slot-scope="scope">
                    <div v-if="isAdvancedToken" style="cursor:pointer" @click="tableInfoDialog(scope.row.jyaq,'缉私案件决定书内容')">
                      {{scope.row.jyaq?scope.row.jyaq.substring(0,30)+'...':''}}
                    </div>
                     <div v-else style="cursor:pointer" >
                      {{scope.row.jyaq?scope.row.jyaq.substring(0,30)+'...':''}}
                    </div>
                  </template>
                </el-table-column>
               
                <el-table-column label="操作" width="400">
                  <template slot-scope="scoped">
                    <el-popover v-if="scoped.row.codeTsAfter||scoped.row.codeTsFront" placement="bottom-start" width="700" trigger="click"
                      popper-class="popperOptions">
                      <el-table :data="[{codeTsAfter:scoped.row.codeTsAfter,codeTsFront:scoped.row.codeTsFront}]" :cell-style="{ color: '#fff' }"
                        :header-cell-style="{ color: '#00ffff' }">
                        <!-- <el-table-column property="entryId" label="报关单编号"></el-table-column>
                        <el-table-column property="gno" label="项号" width="50"></el-table-column>
                        <el-table-column property="gname" label="商品名称"></el-table-column> -->
                        <el-table-column property="codeTsFront" label="更改前HS"></el-table-column>
                        <el-table-column property="codeTsAfter" label="更改后HS"></el-table-column>
                      </el-table>
                      <el-button style="margin-right:10px" size="medium" type="primary" slot="reference" plain>税号更改</el-button>
                    </el-popover>
                    <el-popover v-if="scoped.row.declPriceAfter||scoped.row.declPriceFront" placement="bottom-start" width="900" trigger="click"
                      popper-class="popperOptions">
                      <el-table :data="[{declPriceAfter:scoped.row.declPriceAfter,declPriceFront:scoped.row.declPriceFront}]" :cell-style="{ color: '#fff' }"
                        :header-cell-style="{ color: '#00ffff' }">
                        <!-- <el-table-column property="entryId" label="报关单编号"></el-table-column>
                        <el-table-column property="gno" label="项号" width="50"></el-table-column>
                        <el-table-column property="gname" label="商品名称"></el-table-column> -->
                        <!-- <el-table-column label="商品编号" property="codeTs"></el-table-column> -->
                        <el-table-column property="declPriceFront" label="商品更改前单价(或总价)"></el-table-column>
                        <el-table-column property="declPriceAfter" label="商品更改后单价(或总价)"></el-table-column>
                      </el-table>
                      <el-button style="margin-right:10px" type="success" plain size="medium" slot="reference">价格更改</el-button>
                    </el-popover>
                    <!-- <el-popover v-if="scoped.row.value.ORIGIN_COUNTRY" placement="bottom-start" width="900" trigger="click"
                      popper-class="popperOptions">
                      <el-table :data="scoped.row.value.ORIGIN_COUNTRY" :cell-style="{ color: '#fff' }"
                        :header-cell-style="{ color: '#00ffff' }">
                        <el-table-column property="entryId" label="报关单编号"></el-table-column>
                        <el-table-column property="gno" label="项号" width="50"></el-table-column>
                        <el-table-column property="gname" label="商品名称"></el-table-column>
                        <el-table-column label="商品编号" property="codeTs"></el-table-column>
                        <el-table-column property="originCountryAfter" label="商品更改前产销国"></el-table-column>
                        <el-table-column property="originCountryFront" label="商品更改后产销国"></el-table-column>
                      </el-table>
                      <el-button style="margin-right:10px" type="danger" plain size="medium" slot="reference">原产地更改</el-button>
                    </el-popover> -->
                    <el-tag v-if="scoped.row.type">{{scoped.row.type}}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
                <div class="pagin">
                  <el-pagination background  @size-change="changeJSSize" @current-change="changeJSPage"
                    :current-page="tableDataJSObj.page" :page-size="tableDataJSObj.size" layout="total, prev, pager, next" :total="tableDataJSObj.total">
                  </el-pagination>
                </div>
            </div>
          </div>
      </div>

    </div>
       <el-dialog append-to-body style="margin-top:10%" :visible="showDialogChayan" width="20%" @close="closeCYDialog" :close-on-click-modal="false" >
         <span slot="title" class="dialog_title">

            <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
            <span>{{chayanTitle}}</span>

         </span>
         <div class="shendanInfo">
           布控查验数：<span>{{ radarMapData.checkDimensionCount }}</span>
         </div>
      </el-dialog>
      <el-dialog append-to-body style="margin-top:10%" :visible="showDialogShendan" width="20%" @close="closeSDDialog" :close-on-click-modal="false" >
         <span slot="title" class="dialog_title">

            <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
            <span>{{shendanTitle}}</span>

         </span>
         <div class="shendanInfo">
          人工审单数：<span>{{ radarMapData.documentReviewCount }}</span>
         </div>
      </el-dialog>
      <el-dialog append-to-body style="margin-top:10%" :title="dialogXSAJTitle" :visible="showDialogXSAJ" width="50%" @close="closeXSAJDialog" :close-on-click-modal="false" >
         <span slot="title" class="dialog_title">
          
            <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
            <span>{{dialogXSAJTitle}}</span>

         </span>
           <el-select v-model="XSANActive" placeholder="请选择" @change="changeSelect">
            <el-option
              v-for="item in secondList"
              :key="item.ajbh"
              :label="item.ajbh"
              :value="item.ajbh">
            </el-option>
          </el-select>
          <el-input
              type="textarea"
              :rows="12"
              readonly
              placeholder=""
              v-model="xsajValue">
            </el-input>
      </el-dialog>
       <el-dialog append-to-body style="margin-top:10%" :title="dialogCheckTitle" :visible="showDialogCheck" width="50%" @close="closeCheckDialog" :close-on-click-modal="false" >
         <span slot="title" class="dialog_title">
          
            <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
            <span>{{dialogCheckTitle}}</span>

         </span>
           <el-select v-model="checkActive" placeholder="请选择" @change="changeSelectCheck" v-if="secondListCheck.length>0">
            <el-option
              v-for="item in secondListCheck"
              :key="item.jobNo"
              :label="item.jobNo"
              :value="item.jobNo">
            </el-option>
          </el-select>
          <el-input
              type="textarea"
              :rows="12"
              readonly
              placeholder=""
              v-model="checkValue">
            </el-input>
      </el-dialog>
       <el-dialog append-to-body style="margin-top:10%" :title="tableTitle" :visible="showtableInfoDialog" width="50%" @close="closetableInfoDialog" :close-on-click-modal="false" >
         <span slot="title" class="dialog_title">
          
            <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
            <span>{{tableTitle}}</span>

         </span>
          
          <el-input
              type="textarea"
              :rows="12"
              readonly
              placeholder=""
              v-model="tableInfo">
            </el-input>
      </el-dialog>
  </div> 
</template>

<script>
import echarts from 'echarts'
import Title from './components/title.vue'

// import { resolutionToken } from "@/api/home/h4a";
import { reqFindInterveneAll, reqFindLawEnforcementInfo, reqFindInterveneAudit, reqFindInterveneSuppressSmuggling,reqFindCheck } from '@/api/home/index.js'
import {getSessionItem} from '@/utils/sessionStorage'
import { getDate, getTime, getWeekDate } from "@/utils/date.js";
import { encrypt, decrypt } from '@/utils/AES.js'
export default {
 
  name:'radarView',
  components:{
    Title,
    // searchView
  },
  data(){
    return {
      
      gridData: [{
        date: '1',
        name: '1',
        address: '1'
      }, {
        date: '1',
        name: '1',
        address: '1'
      }, {
        date: '1',
        name: '1',
        address: '1'
      }, {
        date: '1',
        name: '1',
        address: '1'
      },
      ],
      client: ["1920", "1080"],
      scale_x: 1,
      scale_y: 1,
      tableDataTG:[
        
      ],
      tableDataHC:[],
      tableDataJHC: [
       

      ],
      tableDataJS:[],
     
      zhiFaForm: {
        consignCode: null,
        consignName: null,
        codeName:null,
        codeTs:null,
        
      },
      zhiFaDate:[],
      ganyuForm:{
        consignCode: null,
        consignName: null,
        
      },
      ganYuDate: [],
      radarMapData: {

      },
      date: "2021-01-01",
      time: "00:00:00",
      weekDate: "星期一",
      timer: null,
      showDialogShendan:false,
      showDialogChayan:false,
      showDialogXSAJ:false,
  
      page:1,
      size:3,
      tableDataTGObj:{
        page: 1,
        size: 5,
        total:0
      },
      tableDataHCObj: {
        page: 1,
        size: 5,
        total: 0
      },
       tableDataJHCObj: {
        page: 1,
        size: 5,
        total: 0
      },
      tableDataJSObj: {
        page: 1,
        size: 5,
        total: 0
      },
      changeSelected:'hc',// 稽查 核查切换
      dialogText:'',
      dialogXSAJTitle:'',//
      secondList:[],
      tableDataTGLoading:false,
      tableDataHCLoading:false,
      tableDataJHCLoading:false,
      tableDataJSLoading:false,
      XSANActive:'',
      xsajValue:'',
      // 
      secondListCheck:[],
      dialogCheckTitle:'',
      showDialogCheck:false,
      checkActive:'',
      checkValue:'',
      // sd
      shendanTitle:'',
      // cy
      chayanTitle:'',
      // 
      tableInfo:'',
      showtableInfoDialog:false,
      tableTitle:'',
      pageTitle:null
      // isAdvancedToken:null
    }
  },
  watch: {
    radarMapData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
        this.chart.hideLoading();
      }
    },
    $route: {
      handler(val) {
        if (val.path == '/visual/thirdView/radarView') {
          // this.ganyuSearch()
          this.zhiFaSearch()
        } else {
          return
        }

      },
      deep: true
    }    
  },
  created() {
    // this.ganyuSearch()

    this.zhiFaSearch()
    // this.authority()
  },
  computed: {
    isAdvancedToken(){
      // console.log(localStorage.getItem('TokenFlag'));
      return JSON.parse(localStorage.getItem('TokenFlag'))
    },
    queryInfo() {
      let query = JSON.parse(decrypt(this.$route.query.key))
      return query
    },
    topath() {
      let query = JSON.parse(decrypt(this.$route.query.key))
      let keyInfo = encrypt(JSON.stringify({
        company: query.company,
        tradeCo: query.tradeCo
      }))
      let code = encodeURIComponent(keyInfo)
      if (!query.company) {
        return '/visual/bigscreen/viewer?reportCode=SecondView'
      } else {

        return `/visual/bigscreen/viewer?reportCode=SecondView&key=${code}`
      }


    },
    transScale() {
      return `transform: scale(${this.scale_x}, ${this.scale_y});
              background-size: 100% 100%;
              transform-origin: left top; 
              overflow-y: auto;
              width:${this.client[0]}px;height:${this.client[1]}px;position: absolute;`;
    },
   
  },
  mounted() {
    this.initClock();
    this.timer = setInterval(() => {
      this.initClock();
    }, 1000);
    window.addEventListener("resize", this.resizeHandler);
    this.resizeHandler();
    this.$nextTick(() => {
      this.initChart();
    });
   
    
  },
  methods: {
    // 判断权限
    //   async authority(){
    //  console.log(getSessionItem());
    //         const res=await resolutionToken(getSessionItem())
    //   // console.log(res,'权限');
    //   if(res.code==200){
    //     let flag=res.data.some(item=>{
    //       return item==6
    //     })
    //     this.isAdvancedToken=flag
    //     // console.log(res,'权限',flag);
    //   }
      
    // },
    tableInfoDialog(val,title){
      
       this.tableInfo=val
       this.tableTitle=title
         this.showtableInfoDialog=true
    },
    closetableInfoDialog(){
      this.showtableInfoDialog=false
      this.tableInfo=''
      this.tableTitle=''
    },
    closeCheckDialog(){
      this.secondListCheck=[],
      this.dialogCheckTitle='',
    
      this.checkActive='',
      this.checkValue=''
      this.showDialogCheck=false
    },
    changeSelectCheck(val){
      const obj=this.secondListCheck.find(item=>item.jobNo==val)
     
      this.checkValue=obj.hcRst
    },
    clickCheck(list){
      if(list.length>0){
         this.showDialogCheck=true
      this.secondListCheck=list
      this.checkActive=list[0].jobNo
      this.checkValue=list[0].hcRst
      }else {
         this.showDialogCheck=true
      }
     
    },
    changeSelect(val){
      const obj=this.secondList.find(item=>item.ajbh==val)
     
      this.xsajValue=obj.jyaq
    },
    clickXSAJ(list){
        this.showDialogXSAJ=true
      this.secondList=list
      this.XSANActive=list[0].ajbh
      this.xsajValue=list[0].jyaq
    },
    closeXSAJDialog(){
      this.secondList=[]
      this.dialogXSAJTitle=''
           this.XSANActive='',
      this.xsajValue='',
      this.showDialogXSAJ=false
    },
    closeSDDialog(){
      this.showDialogShendan=false
    },
    closeCYDialog(){
      this.showDialogChayan=false
    },
   
    async ganyuSearch() {
      this.showDialogShendan = false
      this.showDialogChayan = false
  
      this.showDialogXSAJ = false
      let query = JSON.parse(decrypt(this.$route.query.key))
      let ganyuObj
      if (!this.ganyuForm.consignCode || this.ganyuForm.consignCode==null) {
        ganyuObj = {
          consignCode: query.tradeCo,
          consignName: this.ganyuForm.consignName,
          startDate: this.ganYuDate[0],
          endDate: this.ganYuDate[1],
        }
      }else {
        ganyuObj = {
          consignCode: this.ganyuForm.consignCode,
          consignName: this.ganyuForm.consignName,
          startDate: this.ganYuDate[0],
          endDate: this.ganYuDate[1],
        }
      }
      const res = await reqFindLawEnforcementInfo(ganyuObj)
      this.radarMapData = res.data
    },
    


    initClock() {
      this.date = getDate();
      this.time = getTime();
      this.weekDate = getWeekDate();
    },
    // 获取通关
    async reqTGList(){
      let query = JSON.parse(decrypt(this.$route.query.key))
      let TGObj
      if (!this.zhiFaForm.consignCode || this.zhiFaForm.consignCode == null) {
        TGObj = {
          consignCode: query.tradeCo,
          consignName: this.zhiFaForm.consignName,
          codeName: this.zhiFaForm.codeName,
          codeTs: this.zhiFaForm.codeTs,
          startDate: this.zhiFaDate[0],
          endDate: this.zhiFaDate[1],
          page: this.tableDataTGObj.page,
          size: this.tableDataTGObj.size
        }
      } else {
        TGObj = {
          consignCode: this.zhiFaForm.consignCode,
          consignName: this.zhiFaForm.consignName,
          codeName: this.zhiFaForm.codeName,
          codeTs: this.zhiFaForm.codeTs,
          startDate: this.zhiFaDate[0],
          endDate: this.zhiFaDate[1],
          page: this.tableDataTGObj.page,
          size: this.tableDataTGObj.size
        }
      }
      this.tableDataTGLoading=true
      const res = await reqFindInterveneAll(TGObj)
      if(!res.data){
         this.tableDataTGLoading=false
         this.tableDataTG=[]
         this.tableDataTGObj.total =0
      }else {
         this.tableDataTGObj.total = res.data.total
      this.tableDataTG = res.data.list
      this.tableDataTGLoading=false
      }
     
     
    },
    // 获取稽查
    async reqJHCList(){
       let query = JSON.parse(decrypt(this.$route.query.key))
        let JHCObj
       if (!this.zhiFaForm.consignCode || this.zhiFaForm.consignCode == null) {
        JHCObj = {
          consignCode: query.tradeCo,
          consignName: this.zhiFaForm.consignName,
          codeName: this.zhiFaForm.codeName,
          codeTs: this.zhiFaForm.codeTs,
          startDate: this.zhiFaDate[0],
          endDate: this.zhiFaDate[1],
          page: this.tableDataJHCObj.page,
          size: this.tableDataJHCObj.size
        }
      } else {
        JHCObj = {
          consignCode: this.zhiFaForm.consignCode,
          consignName: this.zhiFaForm.consignName,
          codeName: this.zhiFaForm.codeName,
          codeTs: this.zhiFaForm.codeTs,
          startDate: this.zhiFaDate[0],
          endDate: this.zhiFaDate[1],
          page: this.tableDataJHCObj.page,
          size: this.tableDataJHCObj.size
        }
      }
       this.tableDataJHCLoading=true
      const res=await reqFindCheck(JHCObj)
       if(!res.data){
        this.tableDataJHCLoading=false
        this.tableDataJHC=[]
        this.tableDataJHCObj.total=0
      }else {
        this.tableDataJHCObj.total = res.data.total
        this.tableDataJHC = res.data.list
        this.tableDataJHCLoading=false
      }
    },
    // 获取核查
    async reqHCList(){
      let query = JSON.parse(decrypt(this.$route.query.key))
      let HCObj
      if (!this.zhiFaForm.consignCode || this.zhiFaForm.consignCode == null) {
        HCObj = {
          consignCode: query.tradeCo,
          consignName: this.zhiFaForm.consignName,
          codeName: this.zhiFaForm.codeName,
          codeTs: this.zhiFaForm.codeTs,
          startDate: this.zhiFaDate[0],
          endDate: this.zhiFaDate[1],
          page: this.tableDataHCObj.page,
          size: this.tableDataHCObj.size
        }
      } else {
        HCObj = {
          consignCode: this.zhiFaForm.consignCode,
          consignName: this.zhiFaForm.consignName,
          codeName: this.zhiFaForm.codeName,
          codeTs: this.zhiFaForm.codeTs,
          startDate: this.zhiFaDate[0],
          endDate: this.zhiFaDate[1],
          page: this.tableDataHCObj.page,
          size: this.tableDataHCObj.size
        }
      }
      this.tableDataHCLoading=true
      const res = await reqFindInterveneAudit(HCObj)
      if(!res.data){
        this.tableDataHCLoading=false
        this.tableDataHC=[]
        this.tableDataHCObj.total=0
      }else {
         this.tableDataHCObj.total = res.data.total
      this.tableDataHC = res.data.list
       this.tableDataHCLoading=false
      }
     
    },
    // 获取缉私
    async reqJSList(){
      let query = JSON.parse(decrypt(this.$route.query.key))
      let JSObj
      if (!this.zhiFaForm.consignCode || this.zhiFaForm.consignCode == null) {
        JSObj = {
          consignCode: query.tradeCo,
          consignName: this.zhiFaForm.consignName,
          codeName: this.zhiFaForm.codeName,
          codeTs: this.zhiFaForm.codeTs,
          startDate: this.zhiFaDate[0],
          endDate: this.zhiFaDate[1],
          page: this.tableDataJSObj.page,
          size: this.tableDataJSObj.size
        }
      } else {
        JSObj = {
          consignCode: this.zhiFaForm.consignCode,
          consignName: this.zhiFaForm.consignName,
          codeName: this.zhiFaForm.codeName,
          codeTs: this.zhiFaForm.codeTs,
          startDate: this.zhiFaDate[0],
          endDate: this.zhiFaDate[1],
          page: this.tableDataJSObj.page,
          size: this.tableDataJSObj.size
        }
      }
      this.tableDataJSLoading=true
      const res = await reqFindInterveneSuppressSmuggling(JSObj)
      if(!res.data){
        this.tableDataJSLoading=false
         this.tableDataJS=[]
         this.tableDataJSObj.total=0
      }else {
        this.tableDataJSObj.total = res.data.totalCount
        this.tableDataJS=res.data.data
        this.tableDataJSLoading=false
      }
      
    },
    // 搜索
    async zhiFaSearch(){
      if(this.zhiFaForm.codeName||this.zhiFaForm.codeTs) {
         this.reqTGList()
        this.reqHCList()
        this.reqJHCList()
        this.reqJSList()
      }else {

        this.reqTGList()
        this.reqHCList()
        this.reqJHCList()
        this.reqJSList()
        this.showDialogShendan = false
        this.showDialogChayan = false
      
        this.showDialogXSAJ = false
        let query = JSON.parse(decrypt(this.$route.query.key))
        let ganyuObj
        if (!this.ganyuForm.consignCode || this.ganyuForm.consignCode==null) {
          ganyuObj = {
            consignCode: query.tradeCo,
            consignName: this.zhiFaForm.consignName,
            startDate: this.zhiFaDate[0],
            endDate: this.zhiFaDate[1],
          }
        }else {
          ganyuObj = {
            consignCode: this.zhiFaForm.consignCode,
            consignName: this.zhiFaForm.consignName,
            startDate: this.zhiFaDate[0],
            endDate: this.zhiFaDate[1],
          }
        }
        const res = await reqFindLawEnforcementInfo(ganyuObj)
        this.radarMapData = res.data
      }
      
    },
    // 执法档案重置
    zhiFaClear(){
      this.zhiFaForm={
        consignCode: null,
        consignName: null,
        codeName: null,
        codeTs: null,

      }
      this.zhiFaDate=[]

      this.zhiFaSearch()
    },
    ganyuClear() {
      this.ganyuForm = {
        companyCode: null,
        companyName: null,

      }
      this.ganYuDate = []
      this.ganyuSearch()
    },
    // 切换页码
    changeTGSize(val) {
      this.tableDataTGObj.size=val
      this.reqTGList()
    },
    changeTGPage(val) {
      this.tableDataTGObj.page=val
      this.reqTGList()
    },
    // 稽核查
    changeHCSize(val){
      this.tableDataHCObj.size=val
      this.reqHCList()
    },
    changeHCPage(val){
      this.tableDataHCObj.page=val
      this.reqHCList()
    },
    changeJCSize(val) {
      // console.log(val);
      this.tableDataJHCObj.size=val
      this.reqJHCList()
    },
    changeJCPage(val) {
      // console.log(val);
      this.tableDataJHCObj.page=val
       this.reqJHCList()
    },
    // 缉私
    changeJSSize(val){
      this.tableDataJSObj.size=val
      this.reqJSList()
    },
    changeJSPage(val){
      this.tableDataJSObj.page = val
      this.reqJSList()
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('radarMap'), null, { renderer: 'svg' });
        this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
      // this.setOptions(this.radarMapData);
    },
    setOptions(list) {
      let arrOne = []
      arrOne.push(list.documentReviewY)
      arrOne.push(list.checkDimensionY)
      arrOne.push(list.auditBL)
      arrOne.push(list.checkCountBL)
      arrOne.push(list.administrativeBL)
      arrOne.push(list.criminalCountBL)
      let arrTwo = []
      arrTwo.push(list.documentReviewSHY)
      arrTwo.push(list.checkDimensionSHY)
      arrTwo.push(list.checkAuditBL)
      arrTwo.push(list.checkCountSBL)
      arrTwo.push(list.administrativeCountBL)
      arrTwo.push(list.criminalCountSBL)
      // let maxList = []

      // maxList.push(list.auditCount)
      // maxList.push(list.checkCount)
      // maxList.push(list.administrativeCount)
      // maxList.push(list.criminalCount)
      // maxList.push(list.checkAuditSH)
      // maxList.push(list.checkCountSH)
      // maxList.push(list.administrativeCountSH)
      // maxList.push(list.criminalCountSH)
      // let max = Math.max.apply(null, maxList);
      
      let detailData=[
        {
          name: "审单",
        },
        {
          name: "查验",
        },
        {
          name: "稽查",
        },
        {
          name: "核查",
        },
        {
          name: "行政案件",
        },
        {
          name: "刑事案件",
        },
      ]
      this.chart.setOption({
        title: {
          text: "",
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            let relVal = params.name;
            let typeList = detailData
            for (let i = 0; i < params.data.value.length; i++) {
              if(params.data.name=='企业干预值'){
                
                  if (typeList[i]['name'] == '审单') {
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.documentReview + ' ' + '%';
                  }else if(typeList[i]['name'] == '查验'){
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkDimension + ' ' + '%';
                  }else if(typeList[i]['name'] == '稽查'){
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.auditCount + ' ' ;
                  }else if(typeList[i]['name'] == '核查'){
                     relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkCount + ' ';
                  }else if(typeList[i]['name'] == '行政案件'){
                      relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.administrativeCount + ' ' ;
                  }
                  else {
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.criminalCount + ' ';
                  }
              }else {
                if (typeList[i]['name'] == '审单') {
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.documentReviewSH + ' ' + '%';
                  }else if(typeList[i]['name'] == '查验'){
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkDimensionSH + ' ' + '%';
                  }else if(typeList[i]['name'] == '稽查'){
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkAuditSH + ' ' ;
                  }else if(typeList[i]['name'] == '核查'){
                     relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkCountSH + ' ';
                  }else if(typeList[i]['name'] == '行政案件'){
                      relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.administrativeCountSH + ' ' ;
                  }
                  else {
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.criminalCountSH + ' ';
                  }
              }
             

            }
            return relVal;
          }
        },
        legend: {
          top: 0,
          right: 0,
          itemWidth: 20,
          itemHeight: 12,
          data: ["企业干预值", "上海海关平均值"],
          textStyle: {
            color: "#fff",
          },
          
        },
        radar: {
          radius: "80%",
          splitNumber: 5,
          axisLine: {
            lineStyle: {
              color: "#fff",
              opacity: 0.2,
            },
          },
          splitLine: {
            lineStyle: {
              color: "#fff",
              opacity: 0.2,
            },
          },
          splitArea: {
            areaStyle: {
              color: "rgba(127,95,132,.3)",
              opacity: 1,
              shadowBlur: 45,
              shadowColor: "rgba(0,0,0,.5)",
              shadowOffsetX: 0,
              shadowOffsetY: 15,
            },
          },
          indicator: [
            {
              name: "审单",
              max: 100,
            },
            {
              name: "查验",
              max: 100,
            },
            {
              name: "稽查",
              max:100,
            },
            {
              name: "核查",
              max: 100,
            },
            {
              name: "行政案件",
              max: 100,
            },
            {
              name: "刑事案件",
              max: 100,
            },
          ],
          triggerEvent: true
        },
        series: [
          {
            name: "",
            type: "radar",
            symbolSize: 5,
            
            // areaStyle: {
            //   normal: {
            //     // shadowBlur: 13,
            //     shadowColor: "rgba(0,0,0,.2)",
            //     // shadowOffsetX: 0,
            //     // shadowOffsetY: 10,
            //     // opacity: 1,
            //   },
            // },
            "areaStyle": {
                "normal": {
                    "color": "rgba(245, 166, 35, 0.4)"
                }
            },
            itemStyle:{
                color:'rgba(245, 166, 35, 1)',
                borderColor:'rgba(245, 166, 35, 0.3)',
                borderWidth:10,
            },
            "lineStyle": {
                "normal": {
                    "type": "dashed",
                    
                    "color": "rgba(245, 166, 35, 1)",
                    "width": 2
                }
            },
            data: [
              {
                value: arrOne ,
                name: "企业干预值",
              },
         
            ],
          },
           {
            name: "",
            type: "radar",
            symbolSize: 5,
            
            // areaStyle: {
            //   normal: {
            //     // shadowBlur: 13,
            //     shadowColor: "rgba(0,0,0,.2)",
            //     // shadowOffsetX: 0,
            //     // shadowOffsetY: 10,
            //     // opacity: 1,
            //   },
            // },
             "itemStyle": {
                  "normal": {
                      color:'rgba(19, 173, 255, 1)',
                      "borderColor": "rgba(19, 173, 255, 0.4)",
                      "borderWidth": 10
                  }
              },
              "areaStyle": {
                  "normal": {
                      "color": "rgba(19, 173, 255, 0.5)"
                  }
              },
              "lineStyle": {
                  "normal": {
                      "color": "rgba(19, 173, 255, 1)",
                      "width": 2,
                      "type": "dashed"
                  }
              },
            data: [
             
              {
                value: arrTwo ,
                name: "上海海关平均值",
              },
            ],
          },
        ],
          color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
        
      });
      const that =this
      this.chart.on('click',function(params){
    
        if(params.name=='审单') {
          // console.log(params);
          that.showDialogShendan = true
          that.shendanTitle='审单'
          // this.showDialogChayan=true
        }else if(params.name=='查验') {
          that.showDialogChayan = true
          that.chayanTitle='查验'
        }else if(params.name=='刑事案件') {
          if(that.isAdvancedToken){
              that.dialogXSAJTitle ='刑事案件编号'
              that.clickXSAJ(that.radarMapData.criminalList)
          }
        
          // that.secondList = that.radarMapData.criminalList
          // that.showDialogXSAJ=true
        }else if(params.name=='行政案件') {
          if(that.isAdvancedToken){
            that.dialogXSAJTitle = '行政案件编号'
            that.clickXSAJ(that.radarMapData.administrativeList)
          }
          
          // that.secondList = that.radarMapData.administrativeList
          // that.showDialogXSAJ = true
        }else if(params.name=='核查') {
          
          that.dialogCheckTitle = '核查编号'
          that.clickCheck(that.radarMapData.checkList)
          // that.secondList = that.radarMapData.checkList
          // that.showDialogXSAJ = true
        }else if(params.name=='稽查') {
           that.dialogCheckTitle = '稽查编号'
            that.clickCheck([])
        }else {
          that.showDialogShendan = false
          that.showDialogChayan = false
          
          that.showDialogXSAJ = false
        }
      })
    },
   
    resizeHandler() {
      this.scale_x = `${document.documentElement.clientWidth}` / this.client[0];
      this.scale_y = `${document.documentElement.clientHeight}` / this.client[1];
    },
  },
    beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
      window.removeEventListener("resize", this.resizeHandler);
  },
}
</script>
<style lang="scss">
.popperOptions {
  background-color: #0457c8;
  max-height: 500px;
  overflow: auto;
  border: none;
  padding: 8px;
  
   .el-table,
   .el-table__expanded-cell {
    background-color: transparent !important;
    border-bottom: none;
  }

  /* 表格内背景颜色 */

   .el-table tr,
   .el-table td {
    background-color: transparent !important;
    border-bottom: none;
  }

   .el-table th,
        .el-table th.el-table__cell {
    background-color: #013689 !important;
    border-bottom: none;

  }

   .el-table td {
    border-bottom: none;
  }

   .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }
}
.el-dialog {
            margin-top:10% !important;
          
            .el-dialog__header {
              background-color: rgba(0, 50, 163, 0.9);
              padding: 10px 10px 10px 20px;
                text-align: start;
                .dialog_title {
                  color: #00ffff;
                  display: flex;
                  .imgTwo {
                    margin-right: 10px;
                    width: 20px;
                    height: 20px;
                  }
                  span {
                    font-size: 16px;
                  }
                } 
              .el-dialog__headerbtn {
                    position: absolute;
                    top: 15px;
                    right: 20px;
                    padding: 0;
                    background: transparent;
                    border: none;
                    outline: none;
                    cursor: pointer;
                    font-size: 16px;
                .el-dialog__close {
                  color: #00ffff;
                }
              }
            }
            .el-dialog__body {
              min-height: 150px;
                background-color: rgba(0, 50, 163, 0.9);
                text-align: start;
                .shendanInfo{
                  text-align: center;
                 
                  font-size: 20px;
                  color: #fff;
                  span{
                    color: #00ffff;
                  }
                }
                  .el-input__inner {
                        width: 200px;
                        // font-size: 12px;
                        height: 36px;
                        line-height: 36px;
                        background-color: #013689;
                         border: 1px solid transparent;
                         color: #00ffff;
                      }
                  .el-textarea  {
                    margin-top: 20px;
                    .el-textarea__inner {
                      background-color: #013689;
                      border: 1px solid transparent;
                      color: #00ffff;
                    }
                  }
                .tableList {
              
                  .el-table {
                      margin: 0 auto;
                      .el-loading-mask {
                              background-color: rgba(255, 255, 255, 0);
                      
                      
                              .el-loading-spinner .circular {
                                  width: 30px;
                                  height: 30px;
                              }
                      
                              .el-loading-spinner .path {
                                  stroke: #c23531;
                                  stroke-width: 8px;
                              }
                          }
                  }
                  .el-table,
                  .el-table__expanded-cell {
                      background-color: transparent !important;

                  }

                  /* 表格内背景颜色 */

                  .el-table tr,
                  .el-table td {
                      background-color: transparent !important;
                      border-bottom: none;
                  }

                  .el-table th {
                      background-color: #013689 !important;
                      border-bottom: none;

                  }

                  .el-table td {
                      border-bottom: none;
                  }

                  .el-table::before {
                      left: 0;
                      bottom: 0;
                      width: 100%;
                      height: 0px;
                  }
              }
              .bottom {
                text-align: end;
                  .el-pagination {
                    .el-pagination__total {
                      color: #fff;
                    }
                    .btn-prev {
                      background-color: transparent;
                    }
                    .btn-next {
                      background-color: transparent;
                    }
                    .el-pager {
                      li {
                        background: transparent;
                        color: #fff;
                      }
                      li.active {
                        color: #1890ff;
                      }
                    }


                  }
              }
            }
          }      
</style>
<style lang="scss" scoped>
.thirdView {
  width: 100%;
  height: 100%;
  background: url('../../assets/images/bigViewIMG/bg.png') no-repeat;
  background-size: 100% 100%;
  // padding: 0 20px;
  .header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
     justify-content: center;
     
      width: 100%;
      height: 70px;
      background-image: url('../../assets/images/bigViewIMG/navbar.png');
      background-size: 100% 100%;

      span {
        font-size: 32px;
        color: #00ffff;
        font-weight: 400;
      }

      .second {
        margin-left: 5px;
        font-size: 32px;
        color: #00ffff;
        font-weight: 400;
        // font-family: '华文楷体'
      }
    }
    .searchView {
      position: absolute;
      top: 22px;
      left: 23px;
    }
    .chilun1 {
      width: 138px;
      height: 48px;
      position: absolute;
        top: 22px;
        left: 1252px;
    }
    .chilun2 {
      width: 138px;
        height: 48px;
        position: absolute;
        top: 22px;
        left: 506px;
    }
    .dateTime {
      position: absolute;
      top: 20px;
      left: 1575px;
      width: 325px;
      height: 36px;
      display: flex;
      color: #fff;
      // text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      .time {
        margin-left: 5px;
      }
      .week {
        margin-left: 5px;
      }
    }
  }

 
  .breadNav {
    position: absolute;
    top: 90px;
    left: 10px;
    display: flex;
    align-items: center;
    .left {
        display: flex;
        align-items: center;
    
        img {
          width: 16px;
          height: 16px;
        }
    
        .add {
          margin-left: 10px;
          margin-right: 10px;
          color: #fff;
          font-size: 16px;
        }
      }
    
      ::v-deep .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner {
            color: #00ffff;
            font-size: 16px;
          }
    
          .is-link {
            color: #fff;
          }
        }
      }
  }
  .main {
    padding: 0 2%;
    margin-top: 30px;
    color: #fff;
    .main_searchForm {
      // padding: 0 100px;
      margin-top: 60px;
      display: flex;

      align-items: center;

      .zhifaDA_title {
        display: flex;
        height: 40px;
       
       
        img {
          width: 20px;
          height: 20px;
          
          margin-right: 10px;
          color: #00ffff;
        }
        .zhifaDA_title_text {
           
          font-size: 18px;
          color: #ccc;
          cursor: pointer;
        }
        .zhifaDA_title_text2 {
          margin-left: 10px;
          // font-size: 16px;
          color: #00ffff;

          cursor: pointer;
        }
        .searchActived{
          vertical-align: middle;
          color: #00ffff;
          font-size: 20px;
        }
      }

      .searchForm {
        margin-left: 10px;


        ::v-deep .el-input .el-input__inner {
          height: 36px;
          line-height: 36px;
        }

        ::v-deep .el-button {
          padding: 10px 20px;
          font-size: 14px;
          border-radius: 3px;
        }
      }
    }
   
    .ganyuDA {
      display: flex;
     
      .bottom {
        flex: 1;
        // margin-top: 10px;
        
        // border: #005f95 1px solid;
        

        .bottom-title {
          // padding: 0 100px;
        }
                
        .radar {
          
          display: flex;
          justify-content: center;
        }
        .dialogShendan {
          position: absolute;
          top:16%;
          right: 1000px;
          width: 160px;
          height: 50px;
          background-color: #1890ff;
          // color: #000;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 5px;
        }
        .dialogChayan{
          position: absolute;
            top: 22%;
            right: 1160px;
            width: 160px;
            height: 50px;
            background-color: #1890ff;
            // color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
        }
        .dialogXSAJ {
          position: absolute;
            top: 20%;
            right: 600px;
            width: 140px;
            font-size: 14px;
           
            // color: #000;

            border-radius: 5px;
          background-color: #1890ff;
          min-height: 300px;
          max-height: 300px;
          overflow-y: auto;
            
            .title {
              display: flex;
              justify-content: center;
              align-items: center;
              color:#fff;
              height: 50px;
             
            }
            .code {
              border-top: 1px solid #ccc;
              display: flex;
                justify-content: center;
                align-items: center;
              height: 50px;
              color: rgba(255, 255, 255, 0.842);
             cursor: pointer;
            }
        }
        .dialogXSAJSecond {
          position: absolute;
            top: 20%;
            right: 250px;
            width: 300px;
            font-size: 14px;
            height: 200px;
            // color: #000;
            padding: 10px;
            border-radius: 5px;
            background-color: #1890ff;
            overflow: auto;
            span {
              font-size: 16px;
              color: #fff;
            }
        }
      }
    }
    .zhifaDA {
      margin-bottom: 20px;
     text-align: center;
      .bottom-title {
        // padding: 0 100px;
      }
      
      .info {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        // padding: 0 100px;
        .info-title {
          color: #00ffff;
          height: 40px;
          display: flex;
          // padding: 0 50px;
          img {
            width: 25px;
            height: 25px;
            margin-right: 10px;
          }
          .jc {
            cursor: pointer;
            color: #ccc;
            
          }
          .hc {
            cursor: pointer;
            color: #ccc;
            margin-left: 10px;
          }
          .changeSelected {
            font-size: 20px;
            color: #00ffff;
          }

        }
        .info-right {
          flex:1;
          
          // margin-left:20px;
          overflow: auto;
          ::v-deep .el-table {
            margin:0 auto
          }
          .pagin {
            display: flex;
            margin-right:10% ;
            justify-content: flex-end;
            ::v-deep .el-pagination__total {
              color: #fff;
            }
          }
          ::v-deep .el-button {
              padding: 6px 8px;
              font-size: 12px;
              border-radius: 6px;
          }
          ::v-deep .el-table,
          ::v-deep .el-table__expanded-cell {
            background-color: transparent !important;
            
          }

          /* 表格内背景颜色 */
         
          ::v-deep .el-table tr,
          ::v-deep .el-table td {
            background-color: transparent !important;
            border-bottom: none;
          }
          ::v-deep .el-table th {
            background-color:#013689 !important;
              border-bottom: none;
            
          }
          ::v-deep .el-table td {
            border-bottom: none;
          }
          ::v-deep .el-table::before {
            left: 0;
              bottom: 0;
              width: 100%;
              height: 0px;
          }
          
          ::v-deep .el-loading-mask {
                          background-color: rgba(255, 255, 255, 0);
            
            
                          .el-loading-spinner .circular {
                            width: 30px;
                            height: 30px;
                          }
            
                          .el-loading-spinner .path {
                            stroke: #c23531;
                            stroke-width: 8px;
                          }
                        }
         
          
        }
      }
    }
  }
       
}
</style>
